<template>
  <div class="analysisManage-container">
    <XTablePage
             ref="tablePage"
              :columnsList="columnsList"
             :apiUrl="'/boss/tc-course/tc-course-report-form'"
              :method="'post'"
              :formConfig="formConfig"
              :openForm="false"
              @getData="getDataTotal"
              :export="false"
              :toolbarConfig="true">
              <template #top>
               <div style="display: flex;
                  align-items: center;
                  padding: 10px 0;
                  font-size: 15px;">
                <el-tag style="margin: 0 10px 0 0" :type="item.status"  v-for="(item,index) in getTools" :key="index">
                <i  :class="item.icon"/>  {{item.name}}
                </el-tag>
                  <el-button type="success" style="    background-color: #30ab74!important;
    border-color: #30ab74!important;" :loading="loading" @click="btnDown" class="el-icon-download" size="small">导 出</el-button>

              </div>
              </template>
    </XTablePage>
  </div>
</template>
<script>

import {getExport} from '@/api/teachManage'
import {downloadFile} from '@/utils/downloadFile'

export default {
  name:'analysisList',
  data() {
    return {
      columnsList: [
      {
         title: "序号",
         type: 'seq', 
         width: 60,
         fixed:'left',
         align:'center',
       },
        {field: 'name',  title: '课件名称'},
        {field: 'previewCount',  title: '预习次数'},
        {field: 'previewTimeToHour',  title: '预习时长(h)'},
        {field: 'teachingCount', title: '授课次数(h)'},
        {field: 'teachingTimeToHour',  title: '授课时长(h)'},
        {field: 'nick',  title: '姓名'},
        {field: 'phone',  title: '账号'},
        {field: 'schoolName',  title: '学校'},
      ],
      formConfig: {
        titleAlign: 'center',
        items: [
          {
            field: 'name',
            title: '课件名称',
            span: 6,
            itemRender: {name: '$input', defaultValue: '', props: {placeholder: '请输入课件名称', clearable: true}}
          },
          {
            align: 'center', 
            itemRender: {
              name: '$buttons',
              children: [
                {props: {type: 'submit', icon: 'el-icon-search', content: '查询', status: 'primary'}},
                {props: {type: 'reset', icon: 'el-icon-delete', content: '重置'}}]
            }
          }
        ]
      },
      totalData:{
        previewCount:0,
        previewTime:0,
        teachingCount:0,
        teachingTime:0
      },
      loading:false
    }
  },
  computed: {
    getTools(){
      return [
          {  name: `合计预习次数:${this.totalData.previewCount||0}`,type: 'text', icon: 'el-icon-edit-outline', status: 'primary' },
          {  name: `合计预习时长(h):${this.totalData.previewTime||0}`,type: 'text', icon: 'el-icon-timer', status: 'danger' },
          {  name: `合计授课次数:${this.totalData.teachingCount||0}`,type: 'text', icon: 'el-icon-pie-chart', status: 'primary' },
          {  name: `合计授课时长(h):${this.totalData.teachingTime||0}`,type: 'text', icon: 'el-icon-timer', status: 'danger' }
        ]
    }
  },
  created() {
  },
  beforeRouteLeave(to, form, next){ 
    console.log(11111)
      to.meta.keepAlive = true;
      next(0)
  },
  methods: {
    getDataTotal(data) {
      if(data && data.code===0){
       this.totalData = data
      }
    },
    btnDown(){
      this.loading = true
       getExport({
           "limit": 999,
           "page": 1
       }).then((res)=>{
         downloadFile(res,'课件系统')
          this.loading = false
       })
    }
  }
}
</script>
<style lang="scss">
.analysisManage-container {
  padding: 10px;
  box-sizing: border-box;
  height: calc(100vh - 84px);
  overflow: auto;

  .type--datetime {
    z-index: 99 !important;
  }

  .imageSize {
    width: 300px;
    height: 150px;
  }
}
</style>
